<template>
    <div class="body">
        <van-tabs v-model="active" sticky swipeable @click="onChangeTab">
            <van-tab title="全部">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('A')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" :key="index"></orderItem>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="待付款">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('B')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" @updateList='updateList' :key="index" v-show="item.sub_order[0].is_pay == 0 && item.sub_order[0].status == 0"></orderItem>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="待出库">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('0')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" @updateList='updateList' :key="index" v-show="item.sub_order[0].is_pay == 1 && item.sub_order[0].status == 0"></orderItem>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="待发货">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('1')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" :key="index" v-show="item.sub_order[0].is_pay == 1 && item.sub_order[0].status == 1"></orderItem>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="已发货">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('2')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" :key="index" v-show="item.sub_order[0].is_pay == 1 && item.sub_order[0].status == 2"></orderItem>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="已送达">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('3')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" :key="index" v-show="item.sub_order[0].is_pay == 1 && item.sub_order[0].status == 3"></orderItem>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="已收货">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('4')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" :key="index" v-show="item.sub_order[0].is_pay == 1 && item.sub_order[0].status == 4"></orderItem>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="已评价">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('5')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" :key="index" v-show="item.sub_order[0].is_pay == 1 && item.sub_order[0].status == 4"></orderItem>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="已取消">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('-4')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" :key="index" v-show="item.sub_order[0].is_pay == 0 && item.sub_order[0].status == -4"></orderItem>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="退款/售后">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh('-1,-2,-3')">
                    <orderItem :orderItem='item' v-for="(item,index) of orderList" :key="index" v-show="item.sub_order[0].is_pay == 1 && item.sub_order[0].status == -3 || item.sub_order[0].status == -2 || item.sub_order[0].status == -1"></orderItem>
                </van-pull-refresh>
            </van-tab>
        </van-tabs>
        <van-empty v-if="!getLength(orderList)" description="暂无订单" />
    </div>
</template>
<script>
import {orderList} from '../ajax'
import orderItem from '../components/orderItem'
import { Toast } from 'vant'
export default {
    data() {
        return {
            active:0,
            page:1,
            limit:10,
            orderList:[],
            isLoading:false
        }
    },
    created(){
        this.getOrderList(this.$route.query.active);
        switch(this.$route.query.active){
            case 'A':
                this.active = 0;
                break;
            case 'B':
                this.active = 1;
                break;
            case '0':
                this.active = 2;
                break;
            case '1':
                this.active = 3;
                break;
            case '2':
                this.active = 4;
                break;
            case '3':
                this.active = 5;
                break;
            case '4':
                this.active = 6;
                break;
            case '5':
                this.active = 7;
                break;
            case '-4':
                this.active = 8;
                break;
            case '-1,-2,-3':
                this.active = 9;
                break;
            default:
                this.active = 0;
        }
    },
    methods: {
        updateList(){
            this.onChangeTab(this.active);
        },
        onChangeTab(name){
            // console.log(name,title)
            this.page = 1;
            let index;
            switch(name){
                case 0:
                    index = "A";
                    break;
                case 1:
                    index = "B";
                    break;
                case 2:
                    index = "0";
                    break;
                case 3:
                    index = "1";
                    break;
                case 4:
                    index = "2";
                    break;
                case 5:
                    index = "3";
                    break;
                case 6:
                    index = "4";
                    break;
                case 7:
                    index = "5";
                    break;
                case 8:
                    index = "-4";
                    break;
                case 9:
                    index = "-1,-2,-3";
                    break;
                default:
                    index = "A";
            }
            this.getOrderList(index);
        },
        onRefresh(index){
            this.page++;
            this.getOrderList(index);
        },
        getOrderList(index){
            // console.log(index);
            const data = {
                group_id:this.$store.getters.wxUserInfo.group_id,
                page:this.page,
                limit:this.limit,
                status:index
            }
            orderList(data).then(res=>{
                res = Object.values(res);
                for(let i of res){
                    for(let item of i.sub_order){
                        item.goods_data = JSON.parse(item.goods_data);
                    }
                }
                this.isLoading = false;
                if(this.page == 1){
                    this.orderList = res;
                }else{
                    if(res.length == 0){
                        Toast('已经是最后一页了');
                        this.page--;
                        return;
                    }
                    this.orderList = res.concat(this.orderList);
                }
                // let key = Object.keys(res);
                // // console.log(res);
                // // console.log(key);
                // for(let i of key){
                //     // console.log(res[i]);
                //     for(let item of res[i].sub_order){
                //         item.goods_data = JSON.parse(item.goods_data);
                //     }
                // }
                // res = Object.values(res);
                // this.isLoading = false;
                // if(this.page == 1){
                //     this.orderList = res;
                // }else{
                //     if(res.length == 0){
                //         Toast('已经是最后一页了');
                //         this.page--;
                //         return;
                //     }
                //     this.orderList = Object.assign(res,this.orderList);
                // }
            })
        },
        getLength(list){
            // console.log(Object.keys(list).length);
            return Object.keys(list).length;
        }
    },
    components:{orderItem}
}
</script>
<style lang="scss" scoped>
    .body{
        min-height:calc(100vh - 3rem);
        background: #eee;
    }
</style>